<!--
 * @Author: 晟松
 * @Date: 2021-12-16 16:55:58
 * @LastEditors: 晟松
 * @LastEditTime: 2022-02-24 23:05:33
 * @FilePath: \volunteer-vue3-admin\src\views\Profile.vue
 * @Description: 个人中心
-->
<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="10" :xs="24">
				<el-card class="box-card" header="个人信息">
					<div>
						<div class="avatar-center" :style="{ display: 'flex', justifyContent: 'center', marginBottom: '20px' }">
							<el-avatar shape="square" :size="100" :src="userAdmin.avatar"></el-avatar>
						</div>
						<el-descriptions title direction="vertical" border>
							<el-descriptions-item label="姓名：">{{ userAdmin.userName }}</el-descriptions-item>
							<el-descriptions-item label="手机号">{{ userAdmin.phone }}</el-descriptions-item>
							<el-descriptions-item label="学校" v-if="userAdmin.identity == 'school'">{{ userAdmin.schoolName }}</el-descriptions-item>
							<el-descriptions-item label="身份：">
								<el-tag size="small">{{ userAdmin.identity }}</el-tag>
							</el-descriptions-item>
							<el-descriptions-item label="创建日期：">{{ userAdmin.createdAt }}</el-descriptions-item>
						</el-descriptions>
					</div>
				</el-card>
			</el-col>
			<el-col :span="14" :xs="24">
				<el-card>
					<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
						<el-tab-pane label="基本资料" name="first">
							<el-form ref="form" :model="dataForm" label-width="80px">
								<el-form-item label="用户昵称" prop="nickName">
									<el-input v-model="dataForm.userName" maxlength="30" />
								</el-form-item>
								<el-form-item label="手机号码" prop="phonenumber">
									<el-input v-model="dataForm.phone" maxlength="11" />
								</el-form-item>
								<el-form-item label="性别">
									<el-radio-group v-model="dataForm.gender">
										<el-radio label="male">男</el-radio>
										<el-radio label="female">女</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" size="mini" @click="submit">修改</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<el-tab-pane label="修改密码" name="second">
							<el-form ref="form" :model="password" label-width="80px">
								<el-form-item label="旧密码" prop="oldPassword">
									<el-input v-model="password.oldPassword" placeholder="请输入旧密码" type="password" show-password />
								</el-form-item>
								<el-form-item label="新密码" prop="newPassword">
									<el-input v-model="password.newPassword" placeholder="请输入新密码" type="password" show-password />
								</el-form-item>
								<el-form-item label="确认密码" prop="confirmPassword">
									<el-input v-model="password.confirmPassword" placeholder="请确认密码" type="password" show-password />
								</el-form-item>
								<el-form-item>
									<el-button type="primary" size="mini" @click="changePwd">修改</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import { reactive, ref, computed, onBeforeMount, onMounted, watchEffect } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import enums from "@/utils/enums";
import { batchRegisterStudent } from "../myApi/school";
import { ElMessage } from 'element-plus'
import { addGlobalMessage, getMineMessageList } from "../myApi/message";
import { update, updatePwd } from "@/myApi/user";



const store = useStore();
const router = useRouter();
let identity = computed(() => store.getters.identity);
let userAdmin = computed(() => store.getters.user);
let schoolAdmin = computed(() => store.getters.schoolAdmin);


let messageType = ref('')
let options = [
	{
		value: 'one',
		label: "单独消息",
	},
	{
		value: 'global',
		label: "全体消息",
	},
	{
		value: 'system',
		label: "系统消息",
	},
];
const serach = () => {
	if (messageType.value == 'one') {
		data.showList = data.oneMessage
	} else if (messageType.value == 'global') {
		data.showList = data.globalMessage
	} else if (messageType.value == 'system') {
		data.showList = data.systemMessage
	}
}
const reset = () => {
	messageType.value = ''
}


const handleEdit = (index, message) => {

}

const handleDelete = (index, message) => {

}

let dialogFormVisible = ref(false)
let dialogTitle = '添加消息（注意是发送给自己所管理的所有人员）'
let formLabelWidth = '140px'
let dialogLablePosition = 'left'
let dialogForm = reactive({
	title: '',
	message: ''
})
// 表单校验规则
const rules = reactive({
	title: [
		{
			required: true,
			message: '请输入标题',
			trigger: 'blur',
		}
	],
	message: [{
		required: true,
		message: '请输入内容',
		trigger: 'blur',
	}],
})
const addMessage = async () => {
	console.log('dialogForm: ', dialogForm);
	let params = {
		id: userAdmin.value.id,
		identity: userAdmin.value.identity,
		isPublic: false,//表示是一个辅导员或者居委会发给自己的所有被管理人员的信息
		title: dialogForm.title,
		message: dialogForm.message
	}
	let res = await addGlobalMessage(params)
	console.log('res: ', res);
	if (res.data.id) {
		dialogFormVisible.value = false;
		// 然后清除dialogForm里的数据，这里就不动了

		// 重新获取列表
		init();
	}
}
const handleAddMessage = () => {
	console.log('handleAddMessage: ');
	dialogFormVisible.value = true

}


let dataForm = reactive({
	userName: userAdmin.value.userName,
	phone: userAdmin.value.phone,
	gender: userAdmin.value.gender
})
const submit = async () => {
	let res = await update(Object.assign(dataForm, {
		id: userAdmin.value.id,
		identity: userAdmin.value.identity,
	}))
	console.log('res: ', res);
}


let password = reactive({
	oldPassword: '',
	newPassword: '',
	confirmPassword: ''
})
const changePwd = async () => {
	if (password.newPassword != password.confirmPassword) {
		ElMessage({
			showClose: true,
			message: '前后输入不一致',
			type: 'success',
		})
	}
	let res = await updatePwd({
		id: userAdmin.value.id,
		identity: userAdmin.value.identity,
		oldPwd: password.oldPassword,
		newPwd: password.newPassword
	})
	console.log('res', res);
}

const multipleSelection = ref([])
/**
 * @description: 处理多行的多选
 * @param {*} val
 * @return {*}
 */
const handleSelectionChange = (val) => {
	console.log('handleSelectionChange val: ', val);
	multipleSelection.value = val
}

// 分页所需的东西
const handleSizeChange = (val) => {
	console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
	console.log(`current page: ${val}`)
}


const activeName = ref('first')

const handleTabClick = (tab, event) => {
	console.log(tab, event)
}
</script>

<style lang="scss" scoped>
.head {
	display: flex;
	// justify-content: space-around;
	flex-wrap: wrap;
	.allBtn {
		margin: 10px;
	}
	.row {
		margin: 0 10px;
		min-width: 20vw;
		.title {
			font-size: 0.9rem;
			font-weight: bold;
		}
	}
}
.show {
	.optionBtn {
	}
}
</style>
